<template>
  <el-table :data="studentInfoList">
    <el-table-column prop="id" label="学号" />
    <el-table-column prop="name" label="姓名" />
     <el-table-column prop="score" label="成绩">
      <template #default="{ row }">
        {{ row.score >= 69 ? '及格' : '挂科' }}
      </template>
    </el-table-column>
    <el-table-column prop="dorm" label="宿舍" />
    <el-table-column label="操作">
      <template #default="{ row, $index }">
        <el-button size="small" type="primary" @click="editInfo(row,$index)">编辑</el-button>
        <el-popconfirm title="请确认是否删除?" @confirm="confirmDelete($index)">
          <template #reference>
            <el-button size="small" type="danger">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog v-model="eidtDialogVisiable" title="编辑学生信息">
    <el-form label-width="80">
      <el-form-item label="学号">
        <el-input v-model="studentInfoObject.id"></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="studentInfoObject.name"></el-input>
      </el-form-item>
      <el-form-item label="成绩">
        <el-input v-model="studentInfoObject.score" type="number"></el-input>
      </el-form-item>
      <el-form-item label="宿舍">
        <el-input v-model="studentInfoObject.dorm"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button size="small" type="primary" @click="confirmEdit()">修改</el-button>
      <el-button size="small" @click="eidtDialogVisiable = false">取消</el-button>
    </template>
  </el-dialog>
  <h4>及格人数：{{ passSummary }}</h4>
  <h4>及格率：{{ passRate }}</h4>
</template>

<script setup>
  import { computed, onMounted, ref } from 'vue';
  import { getStudentInfos } from '@/api/studentApi';
  import { ElMessage } from 'element-plus';

  const studentInfoList = ref([])
  const eidtDialogVisiable = ref(false)
  const editIndex = ref(-1)
  const studentInfoObject = ref({
    id: '',
    name: '',
    score: 0,
    dorm: ''
  })
  const passSummary = computed(() => {
    return studentInfoList.value.filter(item => item.score >= 60).length
  })

  const passRate = computed(() => {
    return studentInfoList.value.filter(item => item.score >= 60).length / 
      studentInfoList.value.length * 100 + '%'
  })

  onMounted(() => {
    getStudentInfos().then(response => {
      console.log(response.data)
      studentInfoList.value = response.data
    }).catch(error => {
      console.log(error)
      ElMessage.error('获取学生信息失败!')
    })
  })

   const editInfo = (info, index) => {
    // console.log(info)
    eidtDialogVisiable.value = true
    editIndex.value = index
    studentInfoObject.value = info
  }

  /*
  确认修改逻辑：
    splice替换对应索引的信息对象
    索引初始化-1
    信息对象初始化空对象
  */
  const confirmEdit = () => {
    eidtDialogVisiable.value = false
    studentInfoList.value.splice(editIndex, 1, studentInfoObject.value)
    editIndex.value = -1
    studentInfoObject.value = {}
  }

  const confirmDelete = (index) => {
    studentInfoList.value.splice(index, 1)
  }

</script>
<style>

  h4 {
    text-align: left;
  }
</style>